<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>下拉框</title>
		<cw:base></cw:base>
		<script type="text/javascript">
			var fields=['code','name','text'];
	        function selectFunction(combo, record, index ){
	        	Wonders.Msg.info("index: "+index+"<br/>value: "+combo.getValue()+"<br/>text: "+record.get('text'),'提示');
	        }
	
	        function changeURL(){
	       		Wonders.utils.changeComboboxStore('combo2',{parentValue: ''},'${pageContext.request.contextPath}/demoform/loadCodeInfo.action');
	        }
	        
	        function setGridSelect(){
				Wonders.form.doQueryGridSelect('peopleSelect', 'luo', function(){}, 0);
			}
	
			function loadGridSelect(){
			    Wonders.utils.formLoad('gridSelectForm',
			    	'${pageContext.request.contextPath}/demoform/loadFormWithGridSelect.action',
			    	{},
			    	function(form,action){
			    		var json = Ext.decode(action.response.responseText).result[0];
			    		Ext.getCmp("peopleSelect").lastQuery = json.name;
			    	}
			    );
			}
			
			function saveGridSelect(){
				Wonders.utils.formSubmit(Ext.getCmp("gridSelectBtn"), 'gridSelectForm',
					function(form,action){
						Wonders.Msg.info("保存成功！",'提示',function(){Ext.getCmp('gridSelectBtn').enable();__WSSIP_GENERATE_GUID__();});
						return false;
					},
					null,
					function(form,action){
						Ext.getCmp('gridSelectBtn').enable();
						__WSSIP_FAILURE_HANLDER__(form,action);
						return false;
					}
				);
			}
			
			function selectPeople(combo,record,index){
				Wonders.Msg.info("index: "+index+"<br/>id: "+combo.getValue()+"<br/>name: "+record.get('name'),'提示');
			}
			
			function setLinkageValue(){
				Ext.getCmp("first").setValue("440000");Ext.getCmp("second").setValue("440300");Ext.getCmp("third").setValue("440303");
				Wonders.Combo.loadLinkage('formWithLinkage', 'first','second',"third");
			}
			
			function loadFormWithLinkage(){
				Wonders.utils.formLoad('formWithLinkage',
			    	'${pageContext.request.contextPath}/demoform/loadFormWithLinkage.action',
			    	{},
			    	function(form,action){
			    		var json = Ext.decode(action.response.responseText).result[0];
			    	}
			    );
			}
			
			function loadFormWithLinkage2(){
				Wonders.utils.formLoadLinkage(
					'${pageContext.request.contextPath}/demoform/getCascadeData.action',
					null,
					'formWithLinkage',
					'${pageContext.request.contextPath}/demoform/loadFormWithLinkage2.action',
					null,
					function(form,action){
						Wonders.utils.atrLinkResponse = {};
					}
				);
			}
			
			var jsonTree = 
				[
					{"id":100,"text":"北京市","qtip":"","expanded":false,"leaf":false,"cls":"folder",
						"children":[
							{"id":101,"text":"东城区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
							{"id":102,"text":"西城区","qtip":"","expanded":false,"leaf":true,"cls":"file"}
						]
					},
					
					{"id":200,"text":"上海市","qtip":"","expanded":false,"leaf":false,"cls":"folder",
						"children":[
								{"id":201,"text":"徐汇区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
								{"id":202,"text":"黄浦区","qtip":"","expanded":false,"leaf":true,"cls":"file"}
							]
						},
						
						{"id":440000,"text":"广东省","qtip":"","expanded":false,"leaf":false,"cls":"folder",
							"children":[
								{"id":440100,"text":"广州市","qtip":"","expanded":false,"leaf":false,"cls":"folder",
									"children":[
									{"id":440103,"text":"荔湾区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440104,"text":"越秀区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440105,"text":"海珠区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440106,"text":"天河区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440111,"text":"白云区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440112,"text":"黄埔区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440113,"text":"番禺区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440114,"text":"花都区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440115,"text":"南沙区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440116,"text":"萝岗区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440183,"text":"增城市","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440184,"text":"从化市","qtip":"","expanded":false,"leaf":true,"cls":"file"}
									 ]
								},
						
								{"id":440300,"text":"深圳市","qtip":"","expanded":false,"leaf":false,"cls":"folder",
									"children":[
									{"id":440303,"text":"罗湖区","qtip":"","expanded":false,"leaf":false,"cls":"folder",
										"children":[
											{"id":440303001,"text":"桂园街道","qtip":"","expanded":false,"leaf":false,"cls":"folder",
												"children":[
													{"id":440303001001,"text":"桂木园社区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
													{"id":440303001002,"text":"人民桥社区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
													{"id":440303001003,"text":"鹿丹村社区","qtip":"","expanded":false,"leaf":true,"cls":"file"}
												 ]
											},
											{"id":440303002,"text":"东晓街道","qtip":"","expanded":false,"leaf":true,"cls":"file"},
											{"id":440303003,"text":"南湖街道","qtip":"","expanded":false,"leaf":true,"cls":"file"}
									    ]
									},
									{"id":440304,"text":"福田区","qtip":"","expanded":false,"leaf":false,"cls":"folder",
										"children":[
											{"id":440304001,"text":"福田街道","qtip":"","expanded":false,"leaf":true,"cls":"file"},
											{"id":440304002,"text":"梅林街道","qtip":"","expanded":false,"leaf":true,"cls":"file"},
											{"id":440304003,"text":"华强北街道","qtip":"","expanded":false,"leaf":true,"cls":"file"}
										]
									},
									{"id":440305,"text":"南山区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440306,"text":"宝安区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440307,"text":"龙岗区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440308,"text":"盐田区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440309,"text":"光明新区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440310,"text":"坪山新区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440311,"text":"大鹏新区","qtip":"","expanded":false,"leaf":true,"cls":"file"},
									{"id":440312,"text":"龙华新区","qtip":"","expanded":false,"leaf":true,"cls":"file"}
									 ]
								}
							]
						}
				]
			
			function setTreeSelectValue(){
				Wonders.Combo.setTreeSelectValue('cityTree1',"440304",false);
				Wonders.Combo.setTreeSelectValue('cityTree2',"440304001,440304002",false);	
			}
			
			function loadFormWithTreeSelect(){
				Wonders.utils.formLoad('formWithTree',
			    	'${pageContext.request.contextPath}/demoform/loadFormWithTreeSelect.action',
			    	{},
			    	function(form,action){
			    		var json = Ext.decode(action.response.responseText).result[0];
			    	}
			    );
			}
			
			function submitFormWithTreeSelect(){
				Wonders.utils.formSubmit(Ext.getCmp("treeSelectBtn"), 'formWithTree',
					function(form,action){
						Wonders.Msg.info("保存成功！",'提示',function(){Ext.getCmp('treeSelectBtn').enable();__WSSIP_GENERATE_GUID__();});
						return false;
					},
					null,
					function(form,action){
						Ext.getCmp('treeSelectBtn').enable();
						__WSSIP_FAILURE_HANLDER__(form,action);
						return false;
					}
				);
			}
		</script>
	</head>
	<body>
		<ul>
			<li>
				<b> 1.普通下拉框 </b>
			</li>
			<li>
				<b> 列表下拉框是最基本的下拉框，其功能结构和HTML的select 元素基本一致 </b>
			</li>
			<li>
				<b> 通过配置数据源来支持下拉选项列表，一般情况下，数据源的记录可以包含值（value，用于表单交互）、 名称(text，用于列表显示) </b>
			</li>
		</ul>
		<br />
		<ul>
			<li>
				静态数据下拉框，选项数据来源通过fields和data设置，fields为数据字段名称，data为数据值，默认的fields为['value','text','id'];
				<table>
					<tr>
						<td>
							静态下拉框：
						</td>
						<td>
							<cw:combobox id="combo1" property="combo1" data="[[440300,'全市'],[440303,'罗湖区'],[440304,'福田区']]" emptyItem="true"
								 emptyText="请选择..." emptyItemValue="" emptyItemText="" value=""/>
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				远程数据下拉框，选项数据来源于后台或者文件，设置url为远程加载URL，fields为自定义的数据字段
				<table>
					<tr>
						<td>
							动态下拉框：
						</td>
						<td>
							<cw:combobox id="combo2" property="combo2" fields="fields" url="${pageContext.request.contextPath}/demoform/loadCodeInfo.action" 
								value="" urlParams="{parentValue: '440300'}" displayField="name" valueField="code" onSelect="selectFunction"
								emptyItem="true" emptyText="请选择..."/>
						</td>
						<td>
							<cw:button text="动态更改下拉数据源" onclick="changeURL()"></cw:button>
						</td>
					</tr>
				</table>
			</li>
		</ul>
		<hr/>
		<ul>
			<li>
				<b> 2.下拉表格 </b>
			</li>
			<li>
				<b> 表格下拉框,也称多栏下拉框，是在列表下拉框的基础上对下拉列表的内容进行表格化扩展而来的一种高级下拉框 </b>
			</li>
			<li>
				<b> 通过内置具有下拉列表行为的表格控件来实现多栏下拉列表，需指定值域和名称域 </b>
			</li>
		</ul>
		<br />
		<cw:form id="gridSelectForm" url="${pageContext.request.contextPath}/demoform/submitFormWithGridSelect.action">
		<ul>
			<li>
				<table width="98%" cellpadding="0" cellspacing="0">
					<colgroup>
						<col width='28%'>
						<col width='42%'>
						<col width='10%'>
						<col width='10%'>
						<col width='10%'>
					</colgroup>
					<tr>
						<td>
							支持模糊查询/回车/下方向键弹出表格：
						</td>
						<td>
							<!-- 清除文本框并不会去掉表格选择，需要在onclean事件方法中处理 -->
							<div style="width:95%">
							<cw:gridSelect id="peopleSelect" property="people" fields="['id','name','sex','age']" valueField="id" displayField="name" 
								title="人员信息列表" width="100%" pageSize="5" autoComplete="false" minChars="2"
								url="${pageContext.request.contextPath}/demoform/loadGridSelectData.action" emptyText="请输入人名关键字,输入两个字后自动联想..." 
								listeners="{'onclean':function(){this.setValue('');},'focus':function(){this.selectText(0,this.getRawValue().length);}}"
								onSelect="selectPeople">
								<cw:gridSelectColumn width="15%" property="id" header="序号" />
								<cw:gridSelectColumn width="53%" property="name" header="姓名" />
								<cw:gridSelectColumn width="15%" property="sex" header="性别" />
								<cw:gridSelectColumn width="15%" property="age" header="年龄" />
							</cw:gridSelect>
							</div>
						</td>
						<td>
							<cw:button text="js设置下拉表格数据" onclick="setGridSelect()"></cw:button>
						</td>
						<td>
							<cw:button text="formLoad后台加载数据" onclick="loadGridSelect()"></cw:button>
						</td>
						<td>
							<cw:button text="保存" id="gridSelectBtn" onclick="saveGridSelect()"/>
						</td>
					</tr>
				</table>
			</li>
		</ul>
		</cw:form>
		<hr/>
		<ul>
			<li>
				<b> 3.联动下拉框 </b>
			</li>
			<li>
				<b> 数据源为字典数据，通过parentField设置上级的id，fields为下拉列表的数据名称数组，默认为['value','text','id']] </b>
			</li>
		</ul>
		<br/>
		<cw:form id="formWithLinkage" ajax="true" url="${pageContext.request.contextPath}/demoform/submitFormWithLinkage.action" waitMsg="提交中...">
		<ul>
			<li>
				<table>
					<tr>
						<td>所属省：</td>
						<td>
							<cw:linkage id="first" property="province" url="${pageContext.request.contextPath}/demoform/loadCodeInfo.action" emptyText="请选择..."/>
						</td>
						<td>所属市：</td>
						<td>
							<cw:linkage id="second" property="city" url="${pageContext.request.contextPath}/demoform/loadCodeInfo.action" parentField="first" emptyText="请选择..."/>
						</td>
						<td>所属区：</td>
						<td>
							<cw:linkage id="third" property="district" url="${pageContext.request.contextPath}/demoform/loadCodeInfo.action" parentField="second" emptyText="请选择..."/>
						</td>
						<td>
							<cw:button text="js加载联动数据" onclick="setLinkageValue()"></cw:button>
						</td>
						<td>
							<cw:button text="远程加载联动数据方式1" onclick="loadFormWithLinkage()"></cw:button>
						</td>
						<td>
							<cw:button text="远程加载联动数据方式2" onclick="loadFormWithLinkage2()"></cw:button>
						</td>
					</tr>
				</table>
			</li>
		</ul>
		</cw:form>
		<hr/>
		<ul>
			<li>
				<b> 4.树下拉框</b>
			</li>
			<li>
				<b> 树型下拉框是在列表下拉框的基础上对下拉列表的内容进行树型化扩展而来的一种高级下拉框，即选项本身具有上下级的关系， 需指定树模型、数据源，同时指定值域和名称域</b>
			</li>
		</ul>
		<br/>
		<cw:form id="formWithTree" url="${pageContext.request.contextPath}/demoform/submitFormWithTreeSelect.action">
			<ul>
				<li>
					<table width="98%">
						<colgroup>
							<col width='15%'>
							<col width='18%'>
							<col width='15%'>
							<col width='18%'>
							<col width='15%'>
							<col width='18%'>
						</colgroup>
						<tr>
							<td>
								逐层加载单选树(动态数据源):
							</td>
							<td>
								<cw:treeSelect id="cityTree1" property="city1" multiSelect="false" emptyText="请选择..." label="机构名称" width="90%">
									<cw:tree height="200" width="200" rootVisible="true" animate="true" url="${pageContext.request.contextPath}/demoform/loadRadioTreeSelect.action"/>
								</cw:treeSelect>
							</td>
							<td>
								逐层加载多选树(动态数据源):
							</td>
							<td>
								<cw:treeSelect id="cityTree2" property="city2" multiSelect="true" emptyText="请选择..." label="机构名称" width="90%">
									<cw:tree height="200" width="200" rootVisible="true" animate="true" url="${pageContext.request.contextPath}/demoform/loadCheckTreeSelect.action"/>
								</cw:treeSelect>
							</td>
							<td>
								<cw:button text="js设置树数据" onclick="setTreeSelectValue()"></cw:button>
							</td>
						</tr>
						<tr>
							<td>
								完整加载单选树(静态数据源):
							</td>
							<td>
								<cw:treeSelect id="cityTree3" property="city3" multiSelect="false" emptyText="请选择..." label="机构名称" width="90%">
									<cw:tree height="200" width="200" data="jsonTree" rootVisible="true" animate="true"/>
								</cw:treeSelect>
							</td>
							<td>
								完整加载多选树(动态数据源):
							</td>
							<td>
								<cw:treeSelect id="cityTree4" property="city4" multiSelect="true" emptyText="请选择..." label="机构名称" width="90%">
									<cw:tree height="200" width="200" rootVisible="true" animate="true" url="${pageContext.request.contextPath}/demoform/loadFullTreeSelect.action"/>
								</cw:treeSelect>
							</td>
							<td>
								<cw:button text="远程加载树数据" onclick="loadFormWithTreeSelect()"></cw:button>
							</td>
							<td>
								<cw:button text="提交树数据" onclick="submitFormWithTreeSelect()" id="treeSelectBtn"></cw:button>
							</td>
						</tr>
					</table>
				</li>
			</ul>
		</cw:form>
		<cw:theme></cw:theme>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resource/scripts/treefix.js"></script>
		<script type="text/javascript">
			Ext.onReady(function(){
				var STORE = Ext.getCmp('peopleSelect').store;
				STORE.on("beforeload",function(){
					Ext.apply(Ext.data.JsonReader.prototype, {
						read : function(response){
				    		var json = response.responseText;
				    		var o = eval("("+json+")");
				    		if(!o) {
				    			throw {message: "JsonReader.read: Json object not found"};
				    		}  
				    		if(o.errors){
				    			throw {message: o.errors};  
				    		}
				    		if(o.metaData){
				     			delete this.ef;
				        		this.meta = o.metaData;
				        		this.recordType = Ext.data.Record.create(o.metaData.fields);
				        		this.onMetaChange(this.meta, this.recordType, o);
				    		}
				     		return this.readRecords(o);
			 			}
					});
				});
				
				STORE.on("load",function(s,r,o){
				    if(r.length==1){
				    	var gridselect = Ext.getCmp("peopleSelect");
				    	gridselect.onSelect(gridselect.store.getAt(0), 0);
				    }
				    STORE.baseParams.queryByIdFlag = false;
			    });
				
				STORE.on("loadexception",function(obj,options,response,e){
				    var errors  = e.message;
				    for(var i=0;i<errors.length;i++){
				    	Wonders.Msg.error(errors[i].msg,'错误',function(){Ext.getCmp('peopleSelect').setValue('');});
				    }
			    });
				
				resetHeight("comboboxFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>
